<template>
	<view class="content" :style="{ marginTop: barTop + 'rpx' }">
		<view style="font-size: 25px;">
			记录理想清单
		</view>
		<u-calendar v-model="showDate" mode="range" @change="change"></u-calendar>
		<view style="display: flex;justify-content: space-between;height: 5%;align-items: center;" v-if="!edit">
			<view>
				<text style="font-size: 16px;" @click="confirm">取消</text>
			</view>
			<view>
				<button
					style="height: 80%;width: 100%;font-size: 16px;display: flex;align-items: center;background-color: #67C23A ;color: #FFF;"
					@click="submit">发布</button>
			</view>
		</view>
		<view style="display: flex;justify-content: space-between;height: 5%;align-items: center;" v-else>
			<view>
				<text style="font-size: 16px;" @click="callBack()">返回</text>
			</view>
			<view>
				<button
					style="height: 80%;width: 100%;font-size: 16px;display: flex;align-items: center;background-color: #67C23A ;color: #FFF;"
					@click="update()">确定</button>
			</view>
		</view>
		<view style="height: 80%;width: 100%;">
			<view v-if="!edit">
				<view>
					<u-card :title="title">
						<view slot="body" v-for="(item,index) in formData.botBillCells" :key="index">
							<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
								<view>
									<view class="u-body-item-title u-line-2" style="margin-bottom: 5%;">
										清单项：{{item.planTitle}}</view>
									<view class="u-body-item-title u-line-2" style="margin-bottom: 5%;"
										v-if="formData.title !=='待办事项'">
										开始时间：{{item.startTime}}</view>
									<view class="u-body-item-title u-line-2" style="margin-bottom: 5%;"
										v-if="formData.title !=='待办事项'">
										完成时间：{{item.endTime}}</view>
									<view class="u-body-item-title u-line-2" style="margin-bottom: 5%;"
										v-if="formData.title ==='待办事项'">
										<view style="display: flex;justify-content: flex-start;margin: 3% 0;">
											执行人：
											<u-avatar v-for="(item,itemIndex) in item.selectedUserList" :key="itemIndex"
												size="50" :src="item.avatar"></u-avatar>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view slot="foot" style="display: flex;justify-content: flex-end;">
							<u-button type="primary" size="mini" @click="editInformation(formData)">编辑</u-button>
						</view>
					</u-card>
				</view>
			</view>
			<view v-else>
				<u-form :model="updateFormData" ref="uForm">
					<u-form-item label="清单:">
						<u-input v-model="updateFormData.title" type="select" :border="false" />
						<u-action-sheet :list="actionSheetList" v-model="showSelect"
							@click="actionSheetCallback"></u-action-sheet>
					</u-form-item>
					<view v-for="(item,index) in updateFormData.botBillCells" :key="index">
						<u-divider bg-color="#F1F1F1" border-color="#67C23A">清单项{{index + 1}}</u-divider>
						<u-form-item label="清单项:" label-width="auto">
							<input v-model="item.planTitle" type="text" placeholder-style="color:#bdbdbd"
								placeholder="请输入内容" confirm-type="next" />
						</u-form-item>
						<u-form-item label="执行人:" label-width="auto" v-if="formData.title ==='待办事项'">
							<u-avatar v-for="(item,itemIndex) in item.selectedUserList" :key="itemIndex" size="50"
								:src="item.avatar"></u-avatar>
						</u-form-item>
						<u-form-item label="日期:" label-width="auto" v-if="formData.title !=='待办事项'">
							<view @click="showDateModal(index)">{{item.startTime}} - {{item.endTime}}</view>
						</u-form-item>
					</view>
				</u-form>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		addBill
	} from '@/api/bot/bill'
	export default {
		data() {
			return {
				barTop: 0,
				groupId: '',
				formData: {},
				updateFormData: {},
				showDate: false,
				title: '',
				edit: false,
				actionSheetList: [{
						text: '待办事项'
					},
					{
						text: '出行计划'
					},
					{
						text: '存钱计划'
					},
					{
						text: '日常计划'
					},
					{
						text: '学习计划'
					}
				],
				showSelect: false,
				selectDateIndex: null
			}
		},
		created() {
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 2.获取状态栏高度
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// 4.计算出导航栏高度  换算成rpx
			let navHeight = (menuButton.height + (menuButton.top - statusBarHeight) * 2) * (750 / windowWidth);
			// 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx'; 
			const statusBarTop = statusBarHeight * (750 / windowWidth);
			this.barTop = statusBarTop;
		},
		methods: {
			onLoad(option) {
				uni.getStorage({
					key: 'groupIdByIndex',
					success: (res) => {
						let data = JSON.parse(res.data);
						this.groupId = data.id;
					}
				});
				const formDataStr = decodeURIComponent(option.formData);
				this.formData = JSON.parse(formDataStr);
				this.updateFormData = JSON.parse(formDataStr);
				this.title = '清单：' + this.formData.title;
			},
			submit() {
				uni.showLoading({
					title: "正在发布"
				})
				this.formData.groupId = this.groupId
				addBill(this.formData).then(res => {
					if (res.code == 200) {
						this.$store.commit('SET_PUBLISHCONTENTTYPE', 3)
						this.$store.commit('IS_REFRESH', true)
						this.$tab.switchTab('/pages/index')
						this.$modal.msgSuccess("发布成功!")
					} else {
						this.$modal.msgError("发布失败!")
					}
					uni.hideLoading()
				})
			},
			confirm() {
				this.$modal.confirm('确定放弃编辑内容吗？').then(() => {
					uni.navigateBack()
				})
			},
			editInformation(formData) {
				this.edit = true
				this.updateFormData = JSON.parse(JSON.stringify(formData)) // 使用深拷贝保存原始数据
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.updateFormData.title = this.actionSheetList[index].text;
				console.log(this.updateFormData)
			},
			change(e) {
				const index = this.selectDateIndex
				this.updateFormData.botBillCells[index].startTime = e.startDate;
				this.updateFormData.botBillCells[index].endTime = e.endDate;
			},
			showDateModal(index) {
				this.selectDateIndex = index;
				this.showDate = true
			},
			callBack() {
				this.$modal.confirm('确定放弃编辑内容吗？').then(() => {
					this.edit = false
				})
			},
			update() {
				this.formData = JSON.parse(JSON.stringify(this.updateFormData)) // 使用深拷贝保存更新数据
				this.title = '目标：' + this.formData.title
				this.edit = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding: 5rpx 15rpx;
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 400rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 30px;
		padding: 15rpx;
	}
</style>